<template>
	<view class="container">
		<view class="header flex justify-between align-center">
			<view class="flex align-center">
				<text class="order-status" :class="$Route.query.detail.ostyle==0?'order-buy':'order-sell'">{{$Route.query.detail.ostyle==0?'买入':'卖出'}}</text>
				<text class="name">{{$Route.query.detail.ptitle}}</text>
			</view>
			<text class="reward-title">收益</text>
			<text class="reward-value">{{$Route.query.detail.ploss}}元</text>
		</view>
		<view class="detail">
			<view class="flex">
				<view class="detail-item flex flex-column">
					<text class="label">平仓手数:</text>
					<text class="value">{{$Route.query.detail.onumber}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<text class="label">盈亏:</text>
					<text class="value">{{$Route.query.detail.ploss}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="detail-item flex flex-column">
					<text class="label">开仓价格:</text>
					<text class="value">{{$Route.query.detail.buyprice}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<text class="label">平仓价格:</text>
					<text class="value">{{$Route.query.detail.sellprice}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="detail-item flex flex-column">
					<text class="label">开仓时间:</text>
					<text class="value">{{$Route.query.detail.buytime|time}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<text class="label">平仓时间:</text>
					<text class="value">{{$Route.query.detail.selltime|time}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="detail-item flex flex-column">
					<text class="label">止盈价格:</text>
					<text class="value">{{$Route.query.detail.surplus?$Route.query.detail.surplus:0}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<text class="label">止损价格:</text>
					<text class="value">{{$Route.query.detail.loss?$Route.query.detail.loss:0}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="detail-item flex flex-column">
					<text class="label">订单号:</text>
					<text class="value">{{$Route.query.detail.id}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<text class="label">开仓方向:</text>
					<text class="value">{{$Route.query.detail.ostyle==0?'买入':'卖出'}}</text>
				</view>
			</view>
			<view class="flex">
				
				<view class="detail-item flex flex-column">
					<text class="label">手续费:</text>
					<text class="value">{{$Route.query.detail.sx_fee}}</text>
				</view>
				<view class="detail-item flex flex-column">
					<!-- <text class="label">库存费:</text>
					<text class="value">{{}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
.container{
	.header{
		padding: 30rpx;
		.order-status{
			margin-right: 10rpx;
			width: 80rpx;
			height: 50rpx;
			font-size: 24rpx;
			color: #fff;
			line-height: 50rpx;
			text-align: center;
		}
		.order-buy{
			background-color: $color-pink;
		}
		.order-sell{
			background-color: $color-green;
		}
		.name{
			font-size: 30rpx;
			color: #333;
		}
		.reward-title{
			font-size: 24rpx;
			color: #333;
		}
		.reward-value{
			font-size: 30rpx;
			color: #333;
		}
	}
	.detail{
		background-color: #fff;
		.detail-item{
			width: 50%;
			box-sizing: border-box;
			padding: 30rpx;
			border-right: 1rpx solid #F0F8FF;
			border-bottom:1rpx solid #F0F8FF;
				&:last-child{
					border-right:none
				}
				.label{
					font-size: 24rpx;
					color: #333;
				}
				.value{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #333;
				}
		}
	}
}
</style>
